<!-- 蒙板组件 -->
<!--XXX 弹窗组件直接使用<uni-popup>组件更好，已弃用，考虑删除 -->
<template>
  <div
    v-show="isShow"
    class="container"
  >
    <div
      class="mask"
      @touchmove.stop.prevent="() => { }"
      @click="props.clickEvent"
    />
    <div
      class="wrapper"
      @touchmove=""
    >
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, watch } from 'vue';

const props = defineProps({
  isShow: {
    type: Boolean,
    default: true,
  },
  clickEvent: {
    type: Function,
    default: () => {
      console.log('clickEvent');
    },
  },
});

// 监听isShow变化
watch(
  () => props.isShow,
  (newVal) => {
    console.log('newVal', newVal);
    if (newVal) {
      // 隐藏tabbar
      uni.hideTabBar();
    } else {
      // 显示tabbar
      uni.showTabBar();
    }
  },
);
</script>

<style scoped lang="scss">
.container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;

  width: 100vw;
  height: 100vh;

  // 遮罩层
  .mask {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background-color: rgb(0 0 0 / 50%);
  }

  // 弹窗
  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
  }
}
</style>
